<!--
 * @Description: select选择器
 * @Author: Zhanghan
 * @Date: 2024-11-04 14:14:05
 * @LastEditTime: 2024-12-05 11:33:07
 * @LastEditors: Zhanghan
-->
<template>
  <ElSelect
    :style="{ width: width }"
    :placeholder="placeholder"
    v-model="selectValue"
    value-key="id"
    :multiple="multiple"
    :multipleLimit="multipleLimit"
    :clearable="clearable"
    :filterable="multiple ? filterable : false"
    :suffix-icon="filterable ? searchIcon : undefined"
  >
    <ElOption
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item"
      :disabled="item.disabled"
    />
  </ElSelect>
</template>
<script setup lang="ts">
import { ElSelect, ElOption } from "element-plus";
import { ref, watch, h, type VNode } from "vue";
import { type MySelectProps } from "./type";
import { Search } from "@element-plus/icons-vue";

defineOptions({ name: "ProSelect" });

const emits = defineEmits(["update:Value"]);

const props = withDefaults(defineProps<MySelectProps>(), {
  size: "default",
  clearable: true,
  placeholder: "请选择",
  multiple: false,
  multipleLimit: 0, // 为 0 则不限制
  placement: "bottom-start",
  filterable: false,
  width: "240px",
});

const selectValue = ref();

//icon搜索自定义
const searchIcon = (): VNode => {
  return h(Search);
};

//监听数据变化，向使用组件发送数据
watch(selectValue, (newVal, oldVal) => {
  emits("update:Value", newVal);
});
</script>
